<template>
	<div id="root">
		<div class="todo-container">
		  <div class="todo-wrap">
			<myHeader :receive="receive"/>
			<myList :todos="todos" 
				:checkTodo="checkTodo"
				:deleteTodo="deleteTodo"/>
			<myFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
		  </div>
		</div>
	  </div>
</template>

<script>
	import myHeader from '@/components/my-header'
	import myFooter from '@/components/my-footer'
	import myList from '@/components/my-list'

	export default {
		name:'App',
		components:{
			myFooter,
			myHeader,
			myList
		},
		data(){
			return {
				todos:[
					{id:'0001',title:'吃饭',done:true},
					{id:'0002',title:'打游戏',done:false},
					{id:'0003',title:'睡觉',done:true},
				]
			}
		},
		methods:{
			//添加一个todo
			receive(x){
				this.todos.unshift(x)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id===id) todo.done=!todo.done
				})
			},
			deleteTodo(id){
				this.todos=this.todos.filter((todo)=>{
					return todo.id!==id
				})
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done=done
				})
			},
			clearAllTodo(){
				this.todos=this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
	}
</script>

<style >
	body {
		background: #fff;
	}
	
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	
	.btn:focus {
		outline: none;
	}
	
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>